import React, {Component} from 'react';
import {connect} from 'dva';
import {routerRedux,Link} from 'dva/router'
import {Row, Col, Table, Card, DatePicker} from 'antd';
import moment from 'moment';
import '../common.less'
import { Tabtitle, IECharts,NoData} from '../../../../components'
import {
    ToolBar,
    CostData,
    CostChart,
    PriceChart
  } from '../components'
import style from './index.less'



const RealtimeStrategy = ({
    dispatch,
    realtimeStrategy,
    location
  }) => {
  const {pathname,query}=location
  const tag='realtimeStrategy'
  const {
    date,
    fundId,
    orderNo,
    fundList,
    pie,
    table,
    trendChart
  } = realtimeStrategy

  const toolbarProps={
    tag,
    date,
    fundId,
    fundList,
    dispatch,
    location
  }

  const costDataProps={
      tag,
      dispatch,
      location,
      data:table,
      fundId,
      orderNo
    },
    costChartProps={
      data:pie
    },
    priceChartProps={
      data:trendChart
    }

  return (
    <div className={`tca ${style.strategy}`}>
      <Tabtitle value={'实时策略监控'}/>
      <div className="content-inner">
        <ToolBar {...toolbarProps}/>
        {
          (pie&&pie.data)&&(table&&table.data)&&(trendChart&&trendChart.data)?
          <div>
            <Card title="隐性成本" bordered={false}  className="module impcost">
              <Row>
                <Col span={14}>
                  <div className="wrap">
                    <CostData {...costDataProps} />
                  </div>
                </Col>
                <Col span={10}>
                  <div className="wrap" style={{marginLeft:20}}>
                    <CostChart {...costChartProps} />
                  </div>
                </Col>
              </Row>
            </Card>
            <Card title="价格走势" bordered={false}  className="module trend">
              <Row>
                <Col span={24}>
                  <div  className={`chart line ${style.line}`}>
                    <PriceChart {...priceChartProps} />
                  </div>
                </Col>
              </Row>
            </Card>
          </div>:<NoData />
        }
      </div>
    </div>
  )

}

RealtimeStrategy.propTypes = {}

export default connect(({realtimeStrategy})=>({realtimeStrategy}))(RealtimeStrategy)
